<template>
	<div class="index">
		<div class="register-box">
			<h5 class="title">农产品供销管理系统(注册)</h5>
			<el-form
				:model="registerForm"
				:rules="registerRules"
				ref="registerForm"
				label-width="6.25rem"
				class="register-form"
			>
				<el-form-item prop="username">
					<el-input
						clearable
						prefix-icon="el-icon-user-solid"
						v-model="registerForm.username"
						placeholder="账号(2-20位的合法字符)"
					></el-input>
				</el-form-item>
				<el-form-item prop="password">
					<el-input
						clearable
						prefix-icon="el-icon-lock"
						v-model="registerForm.password"
						placeholder="密码[必填](5-20位的合法字符)"
					></el-input>
				</el-form-item>
				<el-form-item prop="phone">
					<el-input
						clearable
						prefix-icon="el-icon-mobile-phone"
						v-model="registerForm.phone"
						placeholder="电话[必填]"
					></el-input>
				</el-form-item>
				<el-form-item>
					<el-link type="primary" style="margin: 0 0 0 90px" @click="goLogin"
						>已有账号,点我登录</el-link
					>
				</el-form-item>
				<el-form-item>
					<el-button style="width: 100%" type="primary" @click="register('registerForm')"
						>注册</el-button
					>
				</el-form-item>
			</el-form>
		</div>
	</div>
</template>

<script>
import { submitRegister } from "@/api/login"
import { registerRules } from "@/utils/rules/user"
export default {
	name: "FrontIndex",

	data() {
		return {
			registerForm: {
				username: "",
				password: "",
				phone: "",
			},
		}
	},
	computed: {
		registerRules,
	},
	mounted() {},
	methods: {
		async register(formName) {
			if (this.checkForm(this, formName)) {
				let res = await submitRegister(this.registerForm)
				if (res.code == 200) {
					this.$router.push("/login")
				}
			}
		},
		goLogin() {
			this.$router.push("/login")
		},
	},
}
</script>

<style lang="scss" scoped>
::v-deep .el-form-item__content {
	margin: 0 !important;
}
.index {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
	width: 100%;
	background-image: url("@/static/imgs/login/bg1.gif");
}

.register-box {
	width: 22.5rem;
	height: 25rem;
	background: white;

	.title,
	.register-form {
		margin: 20px 0 0 0;
	}

	.title {
		height: 20px;
		line-height: 20px;
		font-size: 18px;
		text-align: center;
	}

	.register-form {
		width: 320px;

		padding: 20px;
		.code-box {
			right: -120px;
			position: absolute;
			bottom: -1px;
			width: 100px;
			height: 40px;
			border: 1px solid rgba(23, 201, 103, 0.725);

			img {
				width: 100%;
				height: 100%;
			}
		}
	}
}
</style>
